<template>
    <!-- 在线预览简历 -->
    <div class="resume2-area">
        <head-usual title="个人简历" to="/user"></head-usual>
        <div id="pdfDom">
   <!-- header -->
        <div class="header">
            <div class="awatar-bg">
                <img src="@/assets/resume.jpg"/>
            </div>
            <h2>{{ResumeInfo.userInfo.name}}</h2>
            <div class="more-edit" v-if="param==0">
                 <div @click="handleRefresh">
                     <svg class="icon" aria-hidden="true" >
                        <use xlink:href="#icon-shuaxin"></use>
                    </svg>
                    刷新
                </div>
                <el-switch
                    v-model="userState.ispublic"
                    @change="handleChange"
                    active-text="公开简历"
                    >
                </el-switch>
            </div>
            <p>{{ResumeInfo.userInfo.personalEvaluation}}</p>
            <div class="awatar-box">
                <img :src="ResumeInfo.userInfo.headportrait"/>
            </div>
        </div>
        <!-- gen-info -->
        <div class="gen-info">
            <div class="title">基本信息</div>
            <div class="gen-info-main">
                <p>生日：<span>{{ResumeInfo.userInfo.datebirth}}</span></p>
                <P>角色：<span>{{ResumeInfo.userInfo.part}}</span></P>
                <p>从事行业：<span>{{ResumeInfo.userInfo.industry}}</span></p>
                <p>联系电话：<span>{{mphone}}</span></p>
                <p>所在地址：<span>{{ResumeInfo.userInfo.provinces}} {{ResumeInfo.userInfo.address}}</span></p>
                <p>个人爱好：<span>{{ResumeInfo.userInfo.introduction}}</span></p>
                 <p v-if="ResumeInfo.userInfo.email">邮箱地址：<span>{{ResumeInfo.userInfo.email}}</span></p>
            </div>
        </div>
        <!-- education-experience -->
        <div class="education-ex gen-info">
            <div class="title">教育经历</div>
            <div v-if="ResumeInfo.edubg.length==0" class="no-text">
                <p class="title-left">暂无</p>
            </div>
            <div class="education-ex-main">
                <div class="education-item" v-for="(item,index) in ResumeInfo.edubg" :key="index">
                    <p class="single">{{item.graduatedt}}年毕业</p>
                    <p class="double">{{item.school}}</p>
                    <p class="single">{{item.degree}}·{{item.major}}</p>
                </div>
               
            </div>
        </div>
        <!-- education-experience -->
        <div class="education-ex gen-info">
            <div class="title">期望工作</div>
            <div v-if="ResumeInfo.expectWork.length==0" class="no-text">
            <p class="title-left">暂无</p>
            </div>
            <div class="education-ex-main">
                <div class="education-item" v-for="(item,index) in ResumeInfo.expectWork" :key="index">
                    <p class="single">{{item.position}}</p>
                    <p class="double">{{item.city}}|{{item.positionType}}|{{item.monthlySalary}}</p>
                    <p class="single">{{item.description}}</p>
                </div>
            </div>
        </div>
         <div class="education-ex gen-info">
            <div class="title">工作经历</div>
            <div v-if="ResumeInfo.workExperience.length==0" class="no-text">
              <p class="title-left">暂无</p>
            </div>
            <div class="education-ex-main">
                <div class="education-item" v-for="(item,index) in ResumeInfo.workExperience" :key="index">
                    <p class="single">{{item.jobtime}}</p>
                    <p class="double">{{item.department}}|{{item.position}}|{{item.salary}}</p>
                    <p class="single">{{item.responsibility}}</p>
                </div>
            </div>
        </div>
           <div class="education-ex gen-info">
            <div class="title">作品展示</div>
             <div v-if="ResumeInfo.projectexperience.length==0" class="no-text">
              <p class="title-left">暂无</p>
            </div>
            <div class="education-ex-main">
                <div class="education-item" v-for="(item,index) in ResumeInfo.projectexperience" :key="index">
                    <p class="single">{{item.name}}</p>
                    <p class="double">{{item.projectdt}}|{{item.partner}}</p>
                    <p class="single">{{item.performance}}</p>
                    <div class="img-group">
                        <div class="img-box" v-for="(img,cindex) in item.arrAtlas" :key="cindex">
                             <img :src="img" />
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="extra-tips">{{ResumeInfo.userInfo.jobSearchingStatus}}</div>
        </div>
        <div class="gettel" v-if="popupVisible">
           <a :href="'tel:'+ResumeInfo.userInfo.mobile">{{ResumeInfo.userInfo.mobile}}</a>
           <p>（点击复制或者拨打电话）</p>
       </div>
        <button v-if="param!=0" type="button"  class="get_call" @click="handleLoadResume">获取联系方式</button>
     
         
        <!-- 弹出报名项目原因的弹框 -->
        <!-- <mt-popup v-if="popupshow" popup-transition="popup-fade" class="popup-reason">
           <a :href="'tel:'+ResumeInfo.userInfo.mobile"></a>
        </mt-popup> -->
    </div>
</template>

<script>
import { GetResume,GetUserState,SwitchResumeStatu,RefreshPreview,IsPayResume } from "@/api/user/index";
import { MessageBox } from "mint-ui";
//导出pdf

export default {
data() {
    return {
     ResumeInfo:{
         userInfo:{},
         expectWork:[],
         workExperience:[],
         edubg:[],
         turnoveranalysis:[],
         projectexperience:[],
         certificate:[]
     },
     userState:{
       isvip:false,
       isPublic:false,
     },
     id:0,
     type:1,
      param:0,
      htmlTitle:"",
      baseurl:"",
      mphone:"",
      popupVisible:false,
    };
  },
  created() {
     
    if(this.$route.params.id){
        this.param=parseInt(this.$route.params.id);
         this.id =  this.param;
    }
    else{
        this.id = this.$store.state.userinfo.id;
    }
    this.type = this.$store.state.userinfo.type;
    if(this.id==0){
        this.$router.push("/auth/login");
        return false;
    }
    // if(this.type==2){
    //       this.$router.push("/user");
    //        return false;
    // }
     GetResume(this.id).then(res=>{
       if(res.StatusCode===200){
        this.ResumeInfo=res.Data;
        //this.htmlTitle=this.ResumeInfo.userInfo.name+"的简历";
        var mphone =this.ResumeInfo.userInfo.mobile.substr(3,4);
         this.mphone= this.ResumeInfo.userInfo.mobile.replace(mphone,"****");
       }
   });
   //获取是否为vip
  GetUserState().then(res=>{
      if(res.StatusCode===200){
        this.userState=res.Data;
     
      }
      else{
          this.$toast("状态获取失败")
      }
  });
  
  },
  methods:{
      handleChange(){
          SwitchResumeStatu().then(res=>{
              if(res.StatusCode===200){
                  this.userState.isPublic=!this.userState.isPublic;
                    this.$toast("切换成功！");
                  
              }
              else{

              }
          });
      },
      handleRefresh(){
            RefreshPreview().then(res=>{
                if(res.StatusCode===200){
                    this.$toast("刷新成功！");
                }
            });
      },

      handleLoadResume(){
    // 
      if(this.id==this.$store.state.userinfo.id){
           this.popupVisible=!this.popupVisible;
           return false;
      }
      IsPayResume(this.param).then(res=>{
          if(res.StatusCode==200){//直接获取
              this.popupVisible=!this.popupVisible;
          }else{
             var price=res.Data;
             MessageBox.confirm(
                "您需要支付"+price +" 元，才能获取他的联系方式"
            ).then(action => {
             var url=`http://www.zhugongzhe.com/OAuth2/wx/?uid=${this.$store.state.userinfo.id}&type=3&expandId=${this.param}&price=${price}&backurl=http://m.zhugongzhe.com/user/resume2/${this.param}&summary=简历下载`;
             window.location.href=url;
            });
           
          }

      });
     }
  }
}
</script>

<style lang="scss" scoped>
$color:#388fee;
.resume2-area{
    background: #fff;
    padding-bottom: 20px;
}
.header{
    padding: 5px 12px;
    border-radius: 5px;
    position: relative;
    .awatar-bg{
        width: 100%;
        height: 76px;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
        overflow: hidden;
    }
    h2{
        font-size: 24px;
        color:#333;
        text-align: center;
        margin-top: 12px;
        font-weight: 100;
    }
    p{
        font-size: 16px;
        color:#666;
        text-align: center;
        margin-top: 5px;
    }
    .awatar-box{
        width: 66px;
        height: 66px;
        line-height: 66px;
        border-radius: 50%;
        overflow: hidden;
        position: absolute;
        border:3px solid #fff;
        left: 50%;
        top:20px;
        margin-left: -33px;
        img{
            width: 100%;
            height: auto;
        }
    }
}
.gen-info{
    padding: 0 12px;
    .title{
        font-size: 16px;
        position: relative;
        padding-left: 8px;
        background: #dcdcdc;
        padding:  4px 0 4px 12px;
        &::before{
        content: "";
        width: 4px;
        height: 12px;
        background: $color;
        position: absolute;
        left: 4px;
        top: 50%;
        margin-top: -6px;
       
        
        }
    }
    &-main{
        padding: 6px 10px;
        p{
            font-size: 14px;
            margin-bottom: 2px;
            color:#999;
            span{
                color:#333;
            }
        }
    }
    
}
.education-ex{
    &-main{
        padding: 6px 10px;
        .education-item{
            position: relative;
            padding-left: 15px;
            margin-bottom: 2px;
            &::before{
                content:"";
                width: 8px;
                height: 8px;
                border-radius: 50%;
                border:1px solid #666;
                position: absolute;
                left: 0;
                top:5px;
                
                
            }
            .img-group{
                display: flex;
                flex-wrap: wrap;
                .img-box{
                    flex: 0 0 50%;
                    overflow: hidden;
                    display: flex;
                    align-items: flex-start;
                    margin-bottom: 5px;
                    img{
                        width: 168px;
                        height: auto;
                    }
                }
            }
            p{
                font-size: 14px;
                margin-bottom: 2px;
            }
            .single{
                color:#999;

            }
            .double{
                color: #333;
            }
        }
    }
}
.extra-tips{
    margin: 8px 12px 20px 12px;
    padding: 8px 0;
    background: #dcdcdc;
    text-align: center;
    font-size: 16px;
}
.more-edit{
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 5px 0 8px 0;
    div{
        margin-left: 20px;
        color:#409eff;
        font-size: 14px;
        display: flex;
        align-items: center;
        .icon{
            font-size: 20px;
            margin-right: 3px;
        }
    }

}
.get_call{
    width: 60%;
    height: 1.207729rem;
    line-height: 1.207729rem;
    display: block;
    margin: 0.483092rem auto;
    border-radius: 0.724638rem;
    color: #fff;
    background: #409EFF;
    margin-bottom: 0.925121rem;
    font-size: 18px;
}
.gettel a{
    width: 50%;
    text-align: center;
    height: 1.086957rem;
    line-height: 1.086957rem;
    display: block;
    margin: 0.362319rem auto;
    border: 0.024155rem solid #ddd;
    border-radius: 0.120773rem;
    color: #fff;
    background: #d74f00;
    margin-bottom: 10px;
    font-size: 0.386473rem;
}
.gettel p{
    text-align: center;
    color: #ccc;
}
</style>
y